<template>
  <div class="home_game_cube">
    <nut-tabs v-if="threeGameKinds" v-model="state.agentId" title-scroll title-gutter="10" @touchstart="onTouchStart"
      @touchmove="onTouchMove" @touchend="onTouchEnd" @change="tabChange">
      <nut-tab-pane :title="unserialize(item.name, false)" :pane-key="item.id" v-for="item in threeGameKinds"
        :key="item.id">
        <GameList :games="cubeGames" :type="listType" :gameWidth="82" :gameHeight="108" />
      </nut-tab-pane>
    </nut-tabs>
    <div class="load_more_btn" @click="loadMoreGames">{{ t('home_page_more_game') }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed, defineProps, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { useI18n } from 'vue-i18n';
import GameList from "./gameList.vue";
import { useTouchMove } from "@/hooks/useTouchMove"
import { useRouter } from "vue-router";
const router = useRouter();
// import eventBus from "@/lolo/eventBus";
import { Page } from '@/store/page';
import { Local } from "@/utils/storage";

import { unserialize } from '@/utils/useStoreMethods';

const { homeGameData } = storeToRefs(Page(pinia));

const { t } = useI18n();
const localTabKey = "SECOND_TAB_SELECTED"
// const gameStore = useGameStore();
const props: any = defineProps({
  tabInfo: {
    type: Object,
    default: () => ({}), // 设置默认值
  },
});

const state = reactive({
  // 游戏平台id  -1为查看全部的游戏
  agentId: -1,
  paneKey: null,

  // 自定义标签 0为全部 1为热门 -2为收藏，-3为最近
  lableId: 1,

  // //也表示场馆id -1 为所有场馆
  cubekKindId: props.tabInfo.id,

  // 当前点击的游戏
  currentGame: null as any,

  // 当前点击的tab
  chosedTabItem: null as any,

})

const localTabInfo = Local.get(localTabKey);

let gameName = ref('')
const threeGameKinds: any = computed(() => {
  const data = homeGameData.value.find((e: any) => (e.id == Number(props.tabInfo.id)))
  if (!data) return []
  gameName.value = unserialize(data.name, false)
  if ([3, 4].includes(data.id)) {
    props.tabInfo.type = 2
    threeGameKinds.value = data.three_platform
    return
  }
  let a: any = {
    id: -1,
    name: { 'zh-CN': '热门', 'vi-VN': 'HOT', 'en-US': 'Recent', },
    picture_pc: "game_icons/icon_pg.png"

  }
  return [a, ...data.three_platform]
})

const cubeGames: any = computed(() => {
  if (state.lableId == 0) {
    const arr = threeGameKinds.value.find((item: any) => item.id == state.agentId);
    if (arr.three_game_kind) {
      const gameinfo = arr.three_game_kind.find((item: any) => item.id == props.tabInfo.id);
      return gameinfo.three_game.slice(0, 12)
    }
  }
  if (state.lableId == 1) { // 热门
    const hotGames: any = []
    props.tabInfo.three_platform.flatMap((item: any) => {
      if (item.three_game_kind) {
        item.three_game_kind.flatMap((kind: any) => {
          kind.three_game.filter((game: any) => {
            if (game.is_hot === 1) {
              hotGames.push(game)
            }
          })
        })
      }
    });
    return hotGames.slice(0, 12)
  }
  return []
})


const tabChange = (item: any) => {
  state.chosedTabItem = item;
  if (item.paneKey != -1) {
    state.lableId = 0
  } else {
    state.lableId = 1
  }
  Local.set(localTabKey, {
    ...item,
    cubekKindId: state.cubekKindId
  });
  state.agentId = item.paneKey
}


const listType = ref(1);

onMounted(() => {
  if (localTabInfo) {
    if (localTabInfo.cubekKindId !== state.cubekKindId) {
      Local.remove(localTabKey);
    } else {
      state.chosedTabItem = localTabInfo;
      state.lableId = localTabInfo.paneKey != -1 ? 0 : 1
      state.agentId = localTabInfo.paneKey
      tabChange(localTabInfo)
    }
  }
})

watch(
  () => props.tabInfo.id,
  (newVal: any, oldVal: any) => {
    if (newVal !== oldVal) {  // 防止首次触发时重复调用
      state.cubekKindId = newVal;
      state.agentId = -1;  // 重置 agentId
    }
  },
  { immediate: true }  // 立即触发一次
);



// 加载更多游戏
const loadMoreGames = () => {
  if (props.tabInfo.id !== 0) {
    let query = {
      type: props.tabInfo.id,
      platformId: state.agentId
    }
    // 热门数据
    if (Number(state.agentId) === -1) {
      query = {
        type: 0,
        platformId: props.tabInfo.id
      }
    }
    router.push({
      path: "/categoryPage",
      query
    })
  } else {
    alert('敬请期待')
    return
  }
}


const onSwipeRight = () => {
  const index = threeGameKinds.value.findIndex((item: any) => item.id === Number(state.agentId))
  if (index >= 1) {
    tabChange({
      paneKey: threeGameKinds.value[index - 1]?.id
    })
  }
}

const onSwipeLeft = () => {
  const index = threeGameKinds.value.findIndex((item: any) => item.id === Number(state.agentId))
  if (index < threeGameKinds.value.length - 1) {
    tabChange({
      paneKey: threeGameKinds.value[index + 1]?.id
    })
  }
}

// @ts-ignore
const { onTouchEnd, onTouchMove, onTouchStart } = useTouchMove(50, {
  onSwipeLeft,
  onSwipeRight
})

</script>

<style lang="scss" scoped>
.home_game_cube {

  :deep(.nut-tabs) {
    width: 347px;
    margin: 0 auto;


    .nut-tabs__titles {
      border-radius: 8px;
      background: #131232 !important;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
      height: 36px;
      padding: 0;
      margin-bottom: 16px;
    }
  }

  .load_more_btn {
    color: #C6C4F5;
    font-size: 14px;
    display: flex;
    width: 347px;
    height: 44px;
    margin: 8px auto 0;
    padding: 15px 0px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #282747;
    box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
  }
}
</style>
